<template>
  <div class="register">
    <div class="content">
    <el-form
      :model="registerUser"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="registerForm"
    >
      <el-form-item><span>Register</span></el-form-item>
      <el-form-item label="手机号" prop="tel" ref='tel'>
        <el-input v-model="registerUser.tel"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input  type="password"  v-model="registerUser.password"></el-input>
      </el-form-item>
            <el-form-item label="确认密码" prop="password2">
        <el-input type="password" v-model="registerUser.password2"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm('ruleForm')" size="small" round>提&nbsp;&nbsp;交</el-button>
        <el-button @click="resetForm('ruleForm')" size="small" round>重&nbsp;&nbsp;置</el-button>
      </el-form-item>
       <el-link :underline="false" class="log" @click.prevent="goLogin">已有账号？现在就去登录</el-link>
    </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data:function(){
    //自定义验证表单元素的方法
     var validatePass2 = (rule, value, callback) => {
        if (value !== this.registerUser.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      registerUser:{
        tel:'',
        password:'',
        password2:''
      },
      rules: {
          tel: [
            {required:true,message:'手机号码不能为空', trigger: 'blur' },
            {min:11,max:11,message:'手机号码必须是11位',trigger:'blur'}
          ],
          password: [
            {required:true,message:'密码不能为空', trigger: 'blur' },
            {min:6,max:6,message:'密码必须是6位',trigger:'blur'}
          ],
           password2: [
            {required:true,message:'确认密码不能为空', trigger: 'blur' },
             { validator: validatePass2, trigger: 'blur' }
          ],
        }
    }
  },
  methods:{
    submitForm(formName) {
     
      //通过ref定位到form表单
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var reg = /^1[345678]\d{9}$/
            if(reg.test(this.registerUser.tel)){
               this.$axios.post('http://localhost:3000/users/register',this.registerUser)
            .then(res => {
              console.log('注册成功！',res)
              this.$router.push('/login') //路由转向登录组件
            })
            .catch(err =>{
              console.log(err)
              alert("该用户已注册！")
            }) 
            }else{
              this.$message({message:"请输入正确的手机号",type:'warning'})
            }
           
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        //实现重置表单元素数据
        this.$refs[formName].resetFields();
      },
      goLogin(){
        this.$router.push('/login')
      }
  }
};
</script>
<style>
.register input.el-input__inner {
  border: none;
}
</style>
<style lang="scss" scoped>
$color:#FA392B;
.register{
  width: 100%;
  height: 760px;
  background-color: rgb(254,130,132);
  font-family: "KaiTi"
}
.content{
  height: 460px;
  width:850px;
  /* border:1px solid #ccc; */
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-400px;
  margin-top:-230px;
  /* background-color: #fff; */
  background: url(../assets/reg.jpg) no-repeat ;
  background-size: 100% 100%;
   box-shadow: 5px 6px 8px rgba(0, 0, 0, .22), 0 0 6px rgba(0, 0, 0, .04) 
   
}
.registerForm{
  width: 400px;
  height: 380px;
  padding:20px 50px 10px 10px;
  float:right;
}
.el-form-item span{
  font-size:40px;
  letter-spacing: 2px;
  font-weight: 100;
  color:#777
}
.el-form-item:nth-child(2),.el-form-item:nth-child(3),.el-form-item:nth-child(4),.el-form-item:nth-child(5){
  position: relative;
  top:20px;
}
.el-button{
  margin-right: 30px;
  background-color: $color;
  color:#fff;
}
.el-button:active,.el-button:focus, .el-button:hover{
  background-color: $color;
  color:#fff;
  border-color:$color;
}
.log{
  position: relative;
  left: 100px;
  top:50px;
}
.el-link.el-link--default:hover{
   color:$color;
}
</style>